<template>
  <div>
    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>
    <el-form label-width="150px"
             :rules="addFormRul"
              ref="addFormRel"
             :model="courseInfo">

      <el-form-item label="课程标题" prop="title" style="width: 800px;">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
                  size="medium" />
      </el-form-item>

      <el-form-item label="推荐分值" prop="point" style="width: 300px;" inline="true">
        <el-input v-model="courseInfo.point" size="medium"/>
      </el-form-item>

      <el-form-item label="课程价格" prop="price" style="width: 300px">
        <el-input v-model="courseInfo.price" size="medium" />

      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="课程封面" prop="cover_img" style="width: 300px">
        <el-upload
            action="http://localhost:8089/api/v1/pub/video/uploadImg"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            v-model="courseInfo.cover_img"
            :limit=1
            >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <!-- 课程简介-->
      <el-form-item label="课程简介" prop="summary" style="width: 300px">
        <el-upload
            action="http://localhost:8089/api/v1/pub/video/uploadImg"
            list-type="picture-card"
            :on-preview="handleSummaryPreview"
            :on-remove="handleSummaryRemove"
            :on-success="handleSummarySuccess"
            v-model="courseInfo.summary"
            :limit=1
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="summaryVisible">
          <img width="100%" :src="summaryUrl" alt="">
        </el-dialog>
      </el-form-item>
    <!--上架时间-->
      <el-form-item label="上架时间"  prop="create_time">
        <el-col :span="3">
          <el-date-picker
              v-model="courseInfo.create_time"
              type="datetime"
              placeholder="选择日期"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button  type="primary" @click="next" style="margin-left: -1080px;">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      courseInfo:{
        summary:'',
        title: '',
        cover_img: '',
        price: '',
        point: '',
        create_time: '',
      },
      videoId:'',
      dialogImageUrl: '',
      dialogVisible: false,
      summaryUrl: '',
      summaryVisible: false,
      addFormRul:{
        title: [
          {
            required:true,
            message: "请输入课程标题",
            trigger: "blur",
          }
        ],
        point: [
          {
            required:true,
            message: "请输入推荐分值",
            trigger: "blur",
          }
        ],
        price: [
          {
            required:true,
            message: "请输入课程价格",
            trigger: "blur",
          }
        ],
        cover_img: [
          {
            required:true,
            message: "请上传课程封面",
            trigger: "blur",
          }
        ],
        create_time: [
          {
            required:true,
            message: "请选择上架时间",
            trigger: "blur",
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    next(){
      this.$refs.addFormRel.validate((valid) => {
        //校验规则全部正确向后台发送请求
        if (!valid) return;
        this.$http.post("api/v1/pub/video/addVideo",this.courseInfo).then((res)=>{
          console.log(this.courseInfo.cover_img);
          console.log(res);
          this.videoId=res.data.data;
          this.$router.push({path:'/course/chapter/'+this.videoId})

        })
      })
    },
    //cover_img
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response){
      this.courseInfo.cover_img=response.data;
    },
    //summary
    handleSummaryRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSummaryPreview(file) {
      this.summaryUrl = file.url;
      this.summaryVisible = true;
    },
    handleSummarySuccess(response){
      this.courseInfo.summary=response.data;
    }
  }
}
</script>
<style>

</style>